<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        *{
            margin:0;
            padding:0;
            font-family:"Microsoft Yahei";
            font-size:18px;
            color:#333;
        }
        div{
            box-shadow:0 0 12px 0 rgb(33,33,33);
            border-radius:10px;
        }
        .box1{
            width:600px;
            height:100px;
            margin:30px auto;
            background:#1b6d85;
        }
        i{
            font-style:normal;
            color:#ff0099;
        }
        .box1 p span{
            display:block;
            text-align:center;
            cursor:pointer;
        }
        .box1 p span:hover{
            background:rgba(230,220,66,0.3);
            color:#ffeeff;
        }
        .box1 p span:hover i{
            color:rgba(100,100,100,0.6);
        }
        .box1 p span.second{
            display:none;
        }
        form{
            position:fixed;
            top:10px;
            left:100px;
        }
        form input{
            width:300px;
            height:44px;
            line-height:44px;
            color:#777;
            border:1px solid #2aabd2;
            z-index:6;
        }
    </style>
    <script src="../../js/jquery-1.11.0.js"></script>
</head>
<body>
    <div class="box1">
        <p>
            <span class="first">我是<i>第一个</i>span标签</span>
            <span class="second">我是<i>第二个</i>span标签</span>
            <span>我是<i>第三个</i>span标签</span>
            <span>我是<i>第四个</i>span标签</span>
        </p>
    </div>
    <form action="">
        <input type="text" value="" />
    </form>
</body>
    <script>
        var ipt = $("form input");
        $(".box1 p .first+span").click(function(){                      //点击class名为first最近的span标签相当于$(".box1 p .first).next()
            var thisCont = $(this).html();
            ipt.val(thisCont);                                          //将这个span的内容包括其包含的标签在input框中显示
        });
        var spanAllsiblings = $(".box1 p span:eq(0)~span");             //这是一个数组，返回的是第一个span后所有兄弟元素span标签，可以用var spanAllsiblings = $(".box1 p span:eq(0)").nextAll("span")代替
        ipt.val("紧随在第"+spanAllsiblings.index()+"个span元素后所有兄弟span标签的有"+spanAllsiblings.length+"个");
        $(".box1 p span:not(.second)");                                 //获取class名不为second的所有span标签
        $(".box1 p span:hidden(span)").css("display","block");          //选取不可见（被隐藏）的span，让它显示出来
    </script>
</html>